<template>
	<div class="content-box">
		<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">售后状态记录-个定</router-link>
			</div>
		</div>
		<div class="roder-details">
				<div class="info">
						<a   class="fh" style="float: right;margin-top: -20px;" @click="fanhui()">返回</a>
					<h3 class="title">售后记录跟踪</h3>
					<h4 class="title10">{{detail.createTime}}</h4>
					<div class="text11">
						<p>申请售后：</p>
						<div>
							<p>售后类型：{{this.detail.afterSalesString}}</p>
							<p>售后原因：{{detail.reason}}</p>
							<div class="imgs" v-if="this.detail.img!=null&&this.detail.img!='' ">
								  <img  :src="this.detail.img" data-action="zoom"> </img>
								
							</div>
							<p>返修产品： {{this.productName}}</p>
		
							<p>返修参数：</p>
							<div class="list">
								<div class="list-div">
									<div v-for="(item,i) in gedingbodysize">
										<p>{{item.body_sizename}}</p>
										<span>{{item.bodysize_value}}</span>
										&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
								</div>
							</div>
						
						</div>
					
					</div>
					
					
		     <div v-for="(item,i) in datalist">
                <h4 class="title10">{{item.createTime}}</h4>
                <div class="text11" >
                    <p>售后状态：</p>
                    <div>
                        <p>{{item.statusString}}</p>
                        <p>备注信息：{{item.remark}}</p>
                    </div>
                </div>
				<div class="text11" v-if="item.status==2" >
				    <div>
				        <p>地址:{{item.saddress}}</p>
				        <p>手机号：{{item.sphone}}</p>
						 <p>收货人：{{item.sperson}}</p>
				    </div>
				</div>
					<div class="text11" v-if="item.kuaidiXs">
						<p>发货：</p>
						<div>
							<p>时间：{{item.fahuoTime}}</p>
							<p>运单号：{{item.courierNumber}}</p>
						</div>
					</div>
							<div class="text11" v-if="item.receivingXs">
						<p> 发货信息</p>
						<div>
							<div class="inputes">
								<input type="text" placeholder="运单号" v-model="courierNumber" >

								<a-select default-value="顺丰快递" style="width: 180px" v-model="courierId" >
									<a-select-option value="1" >
										顺丰快递
									</a-select-option>
									<a-select-option value="2">
										申通快递
									</a-select-option>
									<a-select-option value="3">
										中通快递
									</a-select-option>
									<a-select-option value="4" >
										其他
									</a-select-option>
								</a-select>
							</div>
							<a  class="fh" @click="fahuo(item)">发货</a>
						</div>
					</div>
                  </div>

				</div>
			</div>
		
	</div>
</template>

<script>
	// @ is an alias to /src
	import { jquery } from '@/mixins/jquery.js'
	import { zoomjs } from '@/mixins/zoom.js'
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	import {getAction,postAction} from "../../api/manage";
	export default {
		name: 'AfterSaleGeding',
		data() {
			return {
				productId:'',
				productName:'',
				courierId:'',
				courierNumber:'',
				ordertype:'',
				gedingbodysize:[],
				locale,
				  url: {
					  getteamafterpeople:"/orderAfter/getteamafterpeople",
                    orderAfterdetail: "/orderAfter/getorderatferdetail",
					Aftertracklist:"/orderAfter/getAftertrack",
					fahuo:"/orderAfter/fahuo",
					gedingcanshu:"/orderAfter/getSingleOrdercanshu"
				},
				  datalist:[],
                detail:{
                     afterSalesString:"",
                     reason:"",
                     createTime:"",
					 img:""
                },
			}
		},
		 created(){
              this.getorderatferdetail();
              this.getAftertrack();
			
        },
		methods: {
			fanhui(){
				  this.$router.push({path:'/my-afterorder'})
			},
			//个订售后中参数
			singleordercanshu(){
				    getAction(domain.publicUrl + this.url.gedingcanshu, {
				        'id':this.$route.query.id,
						'productId':this.productId
				    }).then(res => {
				     this.gedingbodysize=res.data.data;
					   console.log("kk"+ this.gedingbodysize[0].bodysize_value+"xx");
					   console.log("hh"+ this.gedingbodysize[1].bodysize_value+"xx");
					   
				    })
			},		
			fahuo(item){
                   getAction(domain.publicUrl + this.url.fahuo, {
					'courierId':this.courierId,
					'courierNumber':this.courierNumber,
					'aftertrackId':item.id,
					'afterId':this.$route.query.id,
					'ordertype':this.ordertype
                }).then(res => {
                 this.getAftertrack();
                })
			},
			selectTab: function(dataStr, i) {
				this[dataStr] = i
			},
			   //查询该条售后的详情
          getorderatferdetail(){
                getAction(domain.publicUrl + this.url.orderAfterdetail, {
                    'id':this.$route.query.id
                }).then(res => {
                 this.detail.afterSalesString=res.data.data.afterSalesString;
                   this.detail.createTime=res.data.data.createTime;
					 this.detail.reason=res.data.data.reason;
					 this.ordertype=res.data.data.ordertype;
					 this.productName=res.data.msg;
					 this.productId=res.data.data.productId;
					 this.detail.img=res.data.data.img;
					   this.singleordercanshu();
                })
          },
         //查询该条售后订单的跟踪记录
         getAftertrack(){
              getAction(domain.publicUrl + this.url.Aftertracklist, {
                    'id':this.$route.query.id
                }).then(res => {
                this.datalist=res.data.data;
                console.log("看一看数组的第一个"+this.datalist[0].remark);
                })
         },
		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		background-color: #fff;
	}
	.roder-details {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		padding: 0px 35px;

		.info {
			padding-top: 30px;
			padding-left: 26px;
			position: relative;
			min-height: 800px;

			.inputes {
				margin-bottom: 20px;
				display: flex;

				&>input {
					margin-right: 10px;
					width: 173px;
					height: 34px;
					padding: 3px 2px 3px 2px;
					font-family: 'ArialMT', 'Arial';
					font-weight: 400;
					font-style: normal;
					font-size: 13px;
					text-decoration: none;
					letter-spacing: normal;
					color: #000000;
					vertical-align: none;
					text-align: left;
					text-transform: none;
					background-color: transparent;
					border: 1px solid rgba(220, 223, 230, 1);
					padding-left: 4px;
				}
			}

			.fh {
				width: 82px;
				height: 36px;
				background-color: rgba(81, 81, 81, 1);
				border-radius: 3px;
				display: block;
				line-height: 36px;
				text-align: center;
				color: rgb(236, 227, 0);
			}

			.imgs {
				display: flex;
				margin-bottom: 20px;

				img {
					width: 88px;
					height: 88px;
					margin-right: 10px;
				}
			}



			.text11 {
				display: flex;
				margin-bottom: 20px;

				&>p {
					width: 100px;
					font-weight: 100;
					font-size: 14px;
					color: #333;

				}

				&>div {
					&>h5 {
						color: #333;
						font-size: 15px;
						font-weight: 500;

						display: block;
					}

					&>p {
						color: #333;
						font-size: 15px;
						font-weight: 100;

						display: block;
					}
				}
			}

			.title10 {
				color: #333;
				font-weight: 700;
				font-size: 16px;
				line-height: 16px;
				margin-bottom: 20px;
			}

			.text10 {
				display: flex;
				margin-bottom: 20px;

				&>p {
					width: 100px;
					font-weight: 100;
					font-size: 14px;
					color: #333;

				}

				div {
					span {
						color: #333;
						font-size: 15px;
						font-weight: 100;

						&.b {
							font-weight: 500;
						}

						display: block;
					}
				}
			}

			.table-css {
				position: relative;

				.bz {
					width: 447px;
					height: 63px;
					background: inherit;
					background-color: rgba(255, 221, 202, 1);
					position: absolute;
					right: 0px;
					top: -63px;
					display: flex;
					align-items: center;
					justify-content: center;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					flex-direction: column;

					p {
						width: 100%;
						color: rgb(251, 8, 8);
						font-size: 13px;
						padding-left: 10px;
						margin-bottom: 0px;
						line-height: 16px;
					}
				}
			}

			.btns {
				margin-top: 25px;
				margin-bottom: 60px;
				display: flex;

				.btn1 {

					border-width: 0px;
					width: 105px;
					height: 42px;
					background: inherit;
					background-color: rgba(81, 81, 81, 1);
					border: none;
					border-radius: 3px;
					-moz-box-shadow: none;
					-webkit-box-shadow: none;
					box-shadow: none;
					font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
					font-weight: 500;
					font-style: normal;
					font-size: 13px;
					text-align: center;
					display: block;
					color: rgb(236, 227, 0);
					line-height: 40px;
					margin-right: 20px;
					cursor: pointer;
				}

				.btn2 {

					border-width: 0px;
					width: 105px;
					height: 42px;
					background: inherit;
					background-color: rgba(244, 244, 244, 1);
					border: none;
					border-radius: 3px;
					-moz-box-shadow: none;
					-webkit-box-shadow: none;
					box-shadow: none;
					font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
					font-weight: 500;
					font-style: normal;
					font-size: 13px;
					text-align: center;
					display: block;
					color: rgb(104, 104, 104);
					line-height: 40px;
					margin-right: 20px;
					cursor: pointer;
				}
			}


			.price {
				color: rgb(38, 38, 38);
				font-size: 16px;

				span {
					color: rgb(215, 1, 1);
				}

				margin: 35px 0px;
			}

			.text1 {
				width: 533px;
				height: 105px;
				padding: 3px 2px 3px 2px;
				font-family: 'ArialMT', 'Arial';
				font-weight: 400;
				font-style: normal;
				font-size: 13px;
				text-decoration: none;
				letter-spacing: normal;
				color: #000000;
				vertical-align: none;
				text-align: left;
				text-transform: none;
				background-color: #f9f9f9;
				border-color: transparent;
				resize: none;
				outline: none;
				padding: 10px;
			}

			.tabs {
				.tab {
					margin-bottom: 10px;
					display: flex;

					h5 {
						width: 112px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						height: 36px;
						align-items: center;
						margin: 0px !important;
						margin-right: 6px !important;
					}

					.tab-content {
						height: 36px;
						display: flex;

						p {
							border: 1px solid rgb(242, 242, 242);
							min-width: 100px;
							height: 36px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 15px;
							color: #333;
							font-size: 15px;
							margin-right: 6px;

							cursor: pointer;

							b {
								display: none;
								font-weight: 700;
							}

							&.active {
								color: rgb(255, 236, 112);
								font-weight: 700;
								background-color: rgb(74, 74, 74);
							}

							&:hover {
								b {
									display: block;
								}

								span {
									display: none;
								}
							}
						}
					}
				}
			}

			h3.title {
				height: 30px;
				line-height: 30px;
				position: relative;
				font-size: 16px;
				color: #333;
				font-weight: 700;
				margin-bottom: 25px;

				&:after {
					position: absolute;
					height: 100%;
					width: 5px;
					position: absolute;
					left: -25px;
					top: 0px;
					background-color: rgba(74, 74, 74, 1);
					content: "";
				}
			}

			.title2 {
				width: 112px;
				padding: 2px 2px 2px 24px;
				font-size: 15px;
				color: #333;
				display: flex;
				height: 36px;
				align-items: center;
				margin: 0px !important;
				margin-bottom: 10px !important;
			}

			.list {
				margin-bottom: 20px;

				.list-div {
					display: flex;
					flex-wrap: wrap;

					div {
						width: 33.3%;
						display: flex;
						height: 36px;
						align-items: center;

						p {
							width: 112px;
							padding: 2px 2px 2px 24px;
							background-color: rgba(249, 249, 249, 1);
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							margin: 0px !important;
						}

						span {
							width: calc(100% - 112px);
							padding: 2px 2px 2px 24px;
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;

							&.b {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
	@import  '~@/mixins/zoom.css';
	
</style>
